import React from 'react';
import { connect } from 'dva';
import { Form, Modal, Select } from 'antd';

const FormItem = Form.Item;

@Form.create()
@connect(({ commonInfo, loading }) => ({
  commonInfo,
  loading: loading.models.commonInfo,
}))
class UpdateDepartmentForm extends React.Component {
  static defaultProps = {
    handleUpdate: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;

    // dispatch({
    //   type: 'commonInfo/fetchDepartment',
    // });
  }

  okHandle = () => {
    const { form, handleUpdate } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleUpdate(fieldsValue);
    });
  };

  render() {
    const {
      modalVisible,
      form,
      commonInfo: { classifyList },
      handleModalVisible,
    } = this.props;

    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={540}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="检测到您的部门未设置，设置后不再提示"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false)}
        onOk={this.okHandle}
      >
        <FormItem key="department" label="所属部门">
          {form.getFieldDecorator('department', {
            rules: [{ required: true, message: '请选择部门' }],
          })(
            <Select placeholder="请选择部门" optionFilterProp="children" style={{ width: '100%' }}>
              {classifyList.map(item => (
                <Select.Option value={item.code} key={item.code}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          )}
        </FormItem>
      </Modal>
    );
  }
}

export default UpdateDepartmentForm;
